/* stylelint-disable indentation */
<!--
 * @Author: ailin
 * @Date: 2022-11-26 15:09:55
 * @LastEditors: ailin
 * @LastEditTime: 2022-11-26 17:35:41
 * @Description: file content
 * @FilePath: /HealthRecords/src/components/TheWelcome.vue
-->
<template>
  <h2 class="h2">测试组 件</h2>
  <h5>{{ thisday }}</h5>
  <p>测试测试 哈哈啊哈哈</p>
  <div @click="handleClick">点击我</div>
  <div @click="handlePatch">点击我</div>
  <div @click="handleMethod">点击我</div>
  <div @click="handleActions">点击我</div>
  <div>{{ store.count }}</div>
</template>
<script setup>
import { onMounted } from "vue"
// import { test } from "@/assets/js/api"
// import { GetWaitingInfo } from "@/request/api/test.js"
import { mainStore } from "../stores/index.js"
import dayjs from "dayjs"
const thisday = dayjs().format("YYYY/MM/DD")
const store = mainStore()
// 第一种方式
const handleClick = () => {
  store.count++
}
//第二种方式，$path传递对象的方式
const handlePatch = () => {
  store.$patch({ count: store.count + 1 })
}
//第三种方式，$path传递函数，能写入业务逻辑
const handleMethod = () => {
  //state参数能对应store中定义的state
  store.$patch(() => {
    store.count++
  })
}
//第四种方式，对应store中的actions
const handleActions = () => {
  store.changeState()
}
onMounted(() => {
  // let params = {
  // 	a: 111
  // }
  // test(params)
  // 	.then((res) => {
  // 		console.log("=====res", res)
  // 	})
  // 	.catch((err) => {
  // 		console.log("=====err", err)
  // 	})
  // GetWaitingInfo(params)
  // 	.then((res) => {
  // 		console.log("=====res", res)
  // 	})
  // 	.catch((err) => {
  // 		console.log("=====err", err)
  // 	})
})
</script>
<style lang="scss" scoped>
.h2 {
  width: 90px;
  font-size: 24px;
  color: $color;
  background: $success-color;

  @include oneTextEllipsis;
}

p {
  font-size: 30px;
  color: $success-color;
  background: $warn-color;
}

span {
  display: inline-block;
}

h5 {
  height: 50px;
  font-size: 30px;
  color: $color;
  background-color: $info-color;
  line-height: 50px;
}
</style>
